টুলটিপের উদাহরণ

কোন এলিমেন্টের টেক্সটের উপর ইউজার মাউস পয়েন্টার নিয়ে গেলে টেক্সট সম্পর্কে অতিরিক্ত কোন তথ্য দেখানোকে টুলটিপ বলে। যেমনঃ

উপরে টুলটিপ টেক্সট

ডানে টুলটিপ টেক্সট

নিচে টুলটিপ টেক্সট

বামে টুলটিপ টেক্সট

বেসিক টুলটিপ

একটি টুলটিপ তৈরি করার পদ্ধতিঃ

kt_satt_skill_example_id=1144

উদাহরণের বর্ণনা

এইচটিএমএলঃ
একটি কন্টেইনার এলিমেন্ট হিসেবে < div> এলিমেন্টকে ব্যবহার করা হয়েছে এবং এতে "tooltip" ক্লাসটি যোগ করা হয়েছে।

span এলিমেন্টে class="tooltiptext" ব্যবহার করা হয়েছে এবং টুলটিপ টেক্সট রাখা হয়েছে।

সিএসএসঃ
tooltipক্লাসটিতে position:relative ব্যবহার করা হয়েছে। কারণ আমরা টুলটিপ টেক্সটের অবস্থান নির্ধারণের ক্ষেত্রে position:absolute ব্যবহার করবো।

tooltiptext ক্লাসটির মাধ্যমে টুলটিপ টেক্সটকে হাইড করা হয়েছে এবং টুলটিপ টেক্সটের আরো কিছু স্টাইল করা হয়েছে।

class="tooltip" যুক্ত <div> এলিমেন্টে :hover সিলেক্টরটি যোগ করা হয়েছে। এর ফলে আমরা <div> এলিমেন্টের উপর মাউস নিয়ে গেলে .tooltiptext ক্লাসের visibility প্রোপার্টির ভ্যালু visible সেট হয়ে যাবে।

টুলটিপের অবস্থান নির্ধারণ

ডানদিকে টুলটিপ

এই উদাহরণে, আমরা টুলটিপ টেক্সটকে ডান পাশে দেখানোর জন্য left:105% ব্যবহার করেছি এবং টুলটিপ টেক্সটকে হোভারএবল টেক্সটের মাঝামাঝি দেখানোর জন্য top:-5px ব্যবহার করেছি।

আপনি যদি টুলটিপ টেক্সটের প্যাডিংয়ের ভ্যালু বাড়ান অথবা কমান তাহলে, top প্রোপার্টির ভ্যালুতেও একই মান ব্যবহার করতে হবে। একই মান ব্যবহার না করলে টুলটিপ টেক্সট মাঝামাঝি থাকবে না।

kt_satt_skill_example_id=1145

উপরেরদিকে টুলটিপ

যদি আপনি টুলটিপকে উপরে দেখাতে চান তাহলে bottom: 100% ব্যবহার করতে হবে এবং আমরা margin-left: -60px ব্যবহার করেছি টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য। -৬০ পিক্সেল ব্যবহার করার কারণ টুলটিপ টেক্সটের প্রস্থ ১২০ পিক্সেল, আমরা এর প্রস্থের অর্ধেক নিয়েছি।

আপনি যদি টুলটিপ টেক্সটের প্রস্থ ১০০ পিক্সেল সেট করেন তাহলে মার্জিন সেট করতে হবে -৫০ পিক্সেল।

kt_satt_skill_example_id=1147

নিচেরদিকে টু্লটিপ

টুলটিপ টেক্সটকে নিচেরদিকে দেখাতে চাইলে আপনাকে bottom: 100% এর পরিবর্তে top: 100% ব্যবহার করতে হবেঃ

kt_satt_skill_example_id=1149

টুলটিপে অ্যাঁরোর ব্যবহার

নিচেরদিকে অ্যাঁরো

আমরা অ্যাঁরোকে নিচেরদিকে রাখার জন্য top: 100% ব্যবহার করেছি এবং left: 50% ব্যবহার করে অ্যাঁরোকে মাঝামাঝি নিয়ে এসেছি। border-width: 5px দ্বারা অ্যাঁরোর সাইজ নির্ধারণ করা হয়েছে, অ্যাঁরোর সাইজ নির্ধারণ করার পর একে মাঝামাঝি রাখার জন্য margin-left: -5px ব্যবহার করেছি।

লক্ষণীয় বিষয় হচ্ছে উভয় প্রোপার্টির মান সমানভাবে দিতে হবে, ১০পিক্সেল বর্ডার দিলে মার্জিনও -১০পিক্সেল ব্যবহার করতে হবে। border-color: black transparent transparent transparent; সেট করতে হবে।

kt_satt_skill_example_id=1150

উপরেরদিকে অ্যাঁরো

উপরের দিকে অ্যাঁরো দেখানোর জন্য top: 100% এর পরিবর্তে bottom: 100% ব্যবহার করতে হবে এবং border-color: transparent transparent black transparent; সেট করতে হবে।

kt_satt_skill_example_id=1153

বামদিকে অ্যাঁরো

বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, right: 100% এবং border-color: transparent black transparent transparent ব্যবহার করতে হবে।

kt_satt_skill_example_id=1156

ডানদিকে অ্যাঁরো

বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, left: 100% এবং border-color: transparent transparent transparent black ব্যবহার করতে হবে।

kt_satt_skill_example_id=1161

টুলটিপ এনিমেশন

টুলটিপ টেক্সটে এনিমেশন যোগ করার পদ্ধতি হচ্ছে transition প্রোপার্টি ও opacity প্রোপার্টির ব্যবহারঃ

kt_satt_skill_example_id=1163